<template>
  <div class="contact-box">
    <el-dialog
      title="联系我们"
      :visible.sync="data.bSwitch"
      :show-close="false"
      :center="true"
      width="540px">
      <div class="content-box">
        <div class="left">
          <div class="msg-box">
            <div class="name">黄云皓</div>
            <div class="sub">AIoT 5G 智能制造</div>
          </div>
        </div>
        <div class="right">
          <div class="ercode-box">
            <div class="ercode"></div>
            <div class="sub-box">
              <div class="sub1">扫一扫 加我微信</div>
              <div class="sub2">请注明您的公司和职务</div>
            </div>
            <div class="email-box"
              v-clipboard:copy="'yhhuang@iot101.com'" 
              v-clipboard:success="onCopy" 
              v-clipboard:error="handleError">
              邮箱：yhhuang@iot101.com
              <div class="copy-icon"></div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="data.bSwitch = false" style="width: 280px; height: 48px;">知道了</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {
          bSwitch: false
        };
      }
    }
  },
  methods: {
    onCopy(e) {
      this.$message.success(`复制成功：${e.text}`);
    },
    handleError() {
      this.$message.error('复制失败');
    }
  }
}
</script>

<style lang="scss" scoped>
.contact-box {
  .content-box {
    padding: 40px 23px;
    overflow: hidden;
    .left {
      width: 160px;
      height: 232px;
      background: url('../../assets/banner1.jpg') no-repeat;
      background-size: cover;
      float: left;
      position: relative;
      border-radius: 2px;
      .msg-box {
        width: 100%;
        height: 72px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
        border-radius: 0px 0px 2px 2px;
        text-align: center;
        position: absolute;
        left: 0;
        bottom: 0;
        .name {
          height: 24px;
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #FFFFFF;
          line-height: 24px;
          margin-top: 14px;
        }
        .sub {
          height: 18px;
          font-size: 12px;
          
          font-weight: 400;
          color: #FFFFFF;
          line-height: 18px;
        }
      }
    }
    .right {
      width: 252px;
      height: 232px;
      float: left;
      margin-left: 32px;
      .ercode-box {
        .ercode {
          width: 140px;
          height: 140px;
          background: url('../../assets/contact_ercode.png') no-repeat;
          background-size: cover;
          margin: 0 auto 8px;
        }
        .sub-box {
          text-align: center;
          margin-bottom: 6px;
          .sub1 {
            height: 20px;
            font-size: 14px;
            
            font-weight: 400;
            color: #696969;
            line-height: 20px;
          }
          .sub2 {
            height: 18px;
            font-size: 12px;
            
            font-weight: 400;
            color: #F96868;
            line-height: 18px;
          }
        }
        .email-box {
          width: 252px;
          height: 40px;
          background: #F9F9F9;
          border-radius: 4px;
          border: 1px solid #F1F1F1;
          line-height: 40px;
          padding-left: 10px;
          padding-right: 16px;
          box-sizing: border-box;
          cursor: pointer;
          &:active {
            opacity: 0.8;
          }
          .copy-icon {
            width: 14px;
            height: 14px;
            background: url('../../assets/copy.png') no-repeat;
            background-size: cover;
            float: right;
            margin-top: 13px;
          }
        }
      }
    }
  }
}
/deep/.el-dialog {
  border-radius: 8px;
}
/deep/.el-dialog__header {
  padding: 10px 20px;
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #4C4C4C;
  line-height: 28px;
  border-bottom: 1px solid #D8D8D8;
}
</style>